<template>
  <div v-loading="loading">
    <div style="margin:20px 0 15px 0">
      <e-container>
        <div class="jingjiheader">
          <div class="info-header">
            <div class="info-title">应急信息</div>
            <div class="title2">EMERGENCY INFORMATION</div>
          </div>
          <form action="javascript:;" @submit="searchSubmit" class="form-search">
            <div class="search-bar">
              <div class="search-radio">
                <a href="javascript:;" @click="selectRadio('kind', '')" :class="{ active: !search.kind }">全部</a>
                <a href="javascript:;" v-for="r in mapemergencykind3" @click="selectRadio('kind', r.id)"
                  :class="{ active: search.kind == r.id }" v-text="r.name"></a>
              </div>
              <el-input class="info-search-input" type="text" v-model="search.title" placeholder="请输入关键词"></el-input>
              <div class="sousuobutton">
                <el-button type="success" icon="el-icon-search" @click="searchSubmit"></el-button>
              </div>
            </div>
          </form>
        </div>

        <div style="margin:10px 0 0 0">
          <!--        <el-card>-->
          <div class="news-list">
            <e-news-list v-for="r in list" :key="r.id" :to="'/emergencydetail?id=' + r.id" :title="r.title"
              :description="r.content" :len="80" :image="r.photo">
              <span>添加人:{{ r.admin }}</span>
              <span>点击量:{{ r.clicks }}</span>
              <span>分类: <e-select-view module="emergencykind" :value="r.kind" select="id"
                  show="name"></e-select-view></span>

            </e-news-list>
          </div>
          <div style="margin-top: 10px;text-align: center">
            <el-pagination @current-change="loadList" :current-page="page" :page-size="15"
              layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
          </div>
          <!--        </el-card>-->
        </div>
      </e-container>
    </div>
  </div>
</template>

<style type="text/scss" scoped lang="scss">
.jingjiheader {
  width: 100%;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

.form-search {
  margin-top: -1%;
  margin-right: 2%;
  margin-left: 2%;
  border-bottom: 1.5px solid #d1d1d1;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.search-radio {
  display: flex;
  align-items: center;

  a {
    //font-family: monospace;
    display: inline-block;
    padding: 8px 10px;
    margin-right: 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;

    .search-radio {
      a {
        display: inline-block;
        padding: 8px 10px;
        margin-right: 15px;
        border-radius: 5px;
      }

      a.active {
        background: #7fabbe;
        color: #ffffff;
      }
    }
  }

  a.active {
    background: #7fabbe;
    color: #ffffff;
  }

  a:hover {
    background: #7fabbe;
    color: #ffffff;
  }
}

.info-search-input {
  width: 100px;
  flex-grow: 1;
  margin-left: 15%;
  margin-right: 0.5%;
}

::v-deep button {
  border-radius: 35px;
  -webkit-appearance: button;
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:hover {
  background-color: #b3cdd8;
  border-color: #b3cdd8;
}

::v-deep button:active {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:focus {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

.info-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.title2 {
  //border-bottom: 1px solid #d1d1d1;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}

.info-header {
  margin-bottom: 20px;
}

.news-list {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 10px;
  text-align: center;
}

::v-deep .e-container {
  padding-bottom: 1%;
  //padding-left: 5%;
  width: 1200px;
  margin: 0 auto;
}

::v-deep div.e-news-info {
  width: 85%;
  margin-left: 7.5%;
  margin-bottom: 15px;
  background: #ffffff;
  position: relative;
  transition: border 0.3s, box-shadow 0.3s;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

::v-deep div.e-news-info:hover {
  border: 1px solid #1cbbb4;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.2);
}
</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';
import ENewsList from "@/components/module/news-list.vue";


/**
 * 后台列表页面
 */
export default {
  components: { ENewsList },
  data() {
    return {
      loading: false,
      list: [],
      search: {
        title: '',
        kind: '',
        photo: '',
        admin: '',
        clicks_start: '',
        clicks_end: '',
        content: '',
        addtime: '',
      },
      page: 1, // 当前页
      pagesize: 12, // 页大小
      totalCount: 0, // 总行数
      total: {},
      mapemergencykind3: [],
    }
  },
  watch: {},
  computed: {},
  methods: {
    searchSubmit() {
      this.loadList(1);
    },
    loadList(page) {
      // 防止重新点加载列表
      if (this.loading) return;
      this.loading = true;
      this.page = page;
      // 筛选条件
      var filter = extend(true, {}, this.search, { page: page + "", pagesize: this.pagesize + "" });
      var diff = objectDiff.diff(filter, this.$route.query);
      
      // 如果筛选条件发生变化，更新Cookie
      if (diff.changed != 'equal') {
        this.updateCookie(filter);
      }
      this.$post(api.emergency.weblist, filter).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },
    selectRadio(target, name) {
      this.search[target] = name;
      this.searchSubmit(1);
    },
    // 更新Cookie
    updateCookie(filter) {
      for (let key in filter) {
        if (filter.hasOwnProperty(key)) {
          document.cookie = `${key}=${filter[key]}; path=/`;
        }
      }
    },
    // 从Cookie中读取筛选条件
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    },
  },
  beforeRouteUpdate(to, form, next) {
    var search = extend(this.search, to.query)
    if (search.page) {
      this.page = Math.floor(to.query.page)
      delete search.page
    }
    if (search.pagesize) {
      this.pagesize = Math.floor(to.query.pagesize)
      delete search.pagesize
    }
    this.loadList(1);
    next();
  },
  created() {
    // 从Cookie中读取筛选条件
    for (let key in this.search) {
      if (this.search.hasOwnProperty(key)) {
        const value = this.getCookie(key);
        if (value !== undefined) {
          this.search[key] = value;
        }
      }
    }

    if (this.$route.query.page) {
      this.page = Math.floor(this.$route.query.page);
    }
    if (this.$route.query.pagesize) {
      this.pagesize = Math.floor(this.$route.query.pagesize);
    }
    this.loadList(this.page);
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>
